<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电商管理后台</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../styles/common.css" />
    <link rel="stylesheet" href="../styles/index.css" />
    <link rel="stylesheet" href="../styles/icon/iconfont.css" />
    <style>
        .body{
            min-width: 1366px;
        }
        .app-main{
            height: calc(100% - 64px);
        }
        .app-main .divTmp{
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div class="app" id="app">
    <div class="app-wrapper openSidebar clearfix">
        <!-- sidebar -->
        <div class="sidebar-container">
            <!--logo图片-->
            <div class="logo">
                <img src="../images/logo.png" alt="" style="width: 208px; height: 90px; margin-top: -38px; margin-bottom: -36px; margin-left: -54px" />
            </div>
            <!--左侧菜单栏-->
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-menu
                        :default-active="defAct"
                        :unique-opened="false"
                        :collapse-transition="false"
                        background-color="#343744"
                        text-color="#bfcbd9"
                        active-text-color="#f4f4f5"
                >
                    <div v-for="item in menuList" :key="item.id">
                        <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
                            <template slot="title">
                                <i class="iconfont" :class="item.icon"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item
                                    v-for="sub in item.children"
                                    :index="sub.id"
                                    :key="sub.id"
                                    @click="menuHandle(sub,false)"
                            >
                                <i :class="iconfont" :class="sub.icon"></i>
                                <span slot="title">{{sub.name}}</span>
                            </el-menu-item
                            >
                        </el-submenu>
                        <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
                            <i class="iconfont" :class="item.icon"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-scrollbar>
        </div>
        <div class="main-container">
            <div class="navbar">
                <!--当前页面-->
                <div class="head-lable">
                    <span>{{headTitle}}</span>
                </div>
                <!--右侧头像下拉菜单-->
                <div class="right-menu">
                    <el-dropdown class="avatar-container right-menu-item" trigger="click">
                        <div class="avatar-wrapper">
                            <img src="../images/anniu.jpg" class="user-avatar" style="margin-top: 10px">
                            {{managername}}
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided>
                                <a href="/logout"><span style="display:block;">单击此处退出</span></a>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <!---->
            <div class="app-main" v-loading="loading">
                <div class="divTmp" v-show="loading"></div>
                <iframe
                        id="cIframe"
                        class="c_iframe"
                        name="cIframe"
                        :src="iframeUrl"
                        width="100%"
                        height="auto"
                        frameborder="0"
                        v-show="!loading"
                ></iframe>
            </div>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/login.js"></script>
<script>

    new Vue({
        el: '#app',
        data() {
            return {
                defAct: '1',
                menuActived: '1',
                name: {},
                managername:'',
                menuList: [
                    {
                        id: 1,
                        name: '商品管理',
                        children: [
                            {
                                id: '/2-1',
                                name: '商品管理',
                                url: '../pages/goods.html',
                            },
                            {
                                id: '/2-2',
                                name: '商品分类管理',
                                url: '../pages/goodskind.html',
                            },
                        ]
                    },
                    {
                        id: 2,
                        name: '用户和管理员',
                        children: [
                            {
                                id: '/3-1',
                                name: '用户管理',
                                url: '../pages/user.html',
                            },
                            {
                                id: '/3-2',
                                name: '管理员管理',
                                url: '../pages/manager.html',
                            },
                        ]
                    },
                    {
                        id: 3,
                        name: '权限与角色',
                        children: [
                            {
                                id: '/4-1',
                                name: '权限管理',
                                url: '../pages/permission.html',
                            },
                            {
                                id: '/4-2',
                                name: '角色管理',
                                url: '../pages/role.html',
                            },
                        ]
                    },
                    {
                        id: 4,
                        name: '地址与订单',
                        children: [
                            {
                                id: '/5-1',
                                name: '地址管理',
                                url: '../pages/address.html',
                            },
                            {
                                id: '/5-2',
                                name: '订单管理',
                                url: '../pages/orders.html',
                            }
                        ]
                    },
                ],
                iframeUrl: '../pages/goods.html',
                headTitle: '商品管理',
                goBackFlag: false,
                loading: true,
                timer: null
            }
        },
        computed: {},
        created() {
            const name = window.localStorage.getItem('name')
            if (name) {
                this.name = JSON.parse(name)
            }
            this.closeLoading()
            axios.get("/managers/getManagername").then((res)=>{
                if (res.data.flag){
                    this.managername=res.data.data;
                }
            });
        },

        beforeDestroy() {
            this.timer = null
            clearTimeout(this.timer)
        },
        mounted() {
            window.menuHandle = this.menuHandle
        },
        methods: {
            menuHandle(item, goBackFlag) {
                this.loading = true
                this.menuActived = item.id
                this.iframeUrl = item.url
                this.headTitle = item.name
                this.goBackFlag = goBackFlag
                this.closeLoading()
            },
            closeLoading(){
                this.timer = null
                this.timer = setTimeout(()=>{
                    this.loading = false
                },1000)
            }
        }
    })
</script>
</body>
</html>
